<script setup lang="ts">
import {elSizeUtil} from 'st-common-ui-utils'
import {MenuTypeEnum} from "../enums/menu-type-enum.ts"

/**
 * 组件参数
 */
const {
  icon,
  iconType,
  pop = false,
  width = '1.5rem',
  height = '1.5rem',
  isFlexCenter = false,
} = defineProps<{
  icon: string | null;
  iconType: MenuTypeEnum | null;
  pop?: boolean;
  width?: string | number;
  height?: string | number;
  isFlexCenter?: boolean;
}>()

const flexCenterStyle = {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  verticalAlign: 'initial !important',
}
</script>

<template>
  <div v-if="icon" class="menu-icon">
    <n-popover v-if="pop">
      <template #trigger>
        <div>
          <StIcon
            :icon="icon"
            :icon-type="iconType"
            :style="{
              width: elSizeUtil.elSizePreHandler(width),
              height: elSizeUtil.elSizePreHandler(height)
            }"
          ></StIcon>
        </div>
      </template>
      <span>{{ icon }}</span>
    </n-popover>
    <StIcon
      v-else
      :icon="icon"
      :icon-type="iconType"
      :style="{
        width: elSizeUtil.elSizePreHandler(width),
        height: elSizeUtil.elSizePreHandler(height),
        ...(isFlexCenter ? flexCenterStyle : {})
      }"
    ></StIcon>
  </div>
</template>

<style scoped>

</style>
